<template>
  <div class="reversing-list">
   <div class="search-box">
    <Row type="flex">
     <Row type="flex" justify="start" class="search-item-left">
      <Col class="search-item">
      <span class="search-label">门店ID:</span>
        <Input v-model="operatSystem"
                  placeholder="请输入">
        </Input>
      </Col>
      <Col class="search-item">
       <span class="search-label">门店名称:</span>
        <Input v-model="operatSystem"
                  placeholder="请输入">
        </Input>
      </Col>
      <Col class="search-item">
          <span class="search-label">冲正方式:</span>
            <Select v-model="model">
                <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
      </Col>
      <Col class="search-item">
          <span class="search-label">冲正完成时间:</span>
         <DatePicker type="datetimerange" :editable="false" class="data-time-style" style="width:280px;"
                      :options="options1"
                      placement="Select date and time">
          </DatePicker>
      </Col>
      <Col class="search-item">
        <Button class="search-btn">查询</Button>
      </Col>
      </Row>
     <Row type="flex" justify="end" class="search-item-right">
      <Col class="search-item">
        <Button class="search-btn" type="primary">重置</Button>
      </Col>
    </Row>
   </Row>
  </div>
  <Table stripe class="table-list"  ref="selection" :columns="columns" :data="data"></Table>
  <div class="page-box"><Page :total="100" show-total show-sizer/></div>
  </div>
</template>
<script>
export default {
  name: 'payment_reversing_list',
  data () {
    return {
      model: '',
      typeList: [
        {
          value: '0',
          label: '数据'
        },
        {
          value: '1',
          label: '现金'
        },
        {
          value: '2',
          label: '对公转账'
        }
      ],
      columns: [
        {
          title: '冲正流水号',
          key: 'member'
        },
        {
          title: '支付/退款流水号',
          key: 'member'
        },
        {
          title: '订单ID',
          key: 'order_id'
        },
        {
          title: '门店ID',
          key: 'store_id'
        },
        {
          title: '冲正方式',
          key: 'type'
        },
        {
          title: '冲正金额(元)',
          key: 'price'
        },
        {
          title: '冲正发起时间',
          key: 'start_time'
        },
        {
          title: '冲正完成时间',
          key: 'end_time'
        },
        {
          title: '备注',
          key: 'remark'
        }
      ],
      data: [
        {
          member: 32245556788899,
          order_id: '12300',
          store_id: '12323',
          type: '现金',
          price: '120',
          start_time: '2018-08-25 14:54',
          end_time: '2018-08-25 14:54',
          remark: ''
        },
        {
          member: 32245556788899,
          order_id: '12300',
          store_id: '12323',
          type: '现金',
          price: '120',
          start_time: '2018-08-25 14:54',
          end_time: '2018-08-25 14:54',
          remark: ''
        },
        {
          member: 32245556788899,
          order_id: '12300',
          store_id: '12323',
          type: '现金',
          price: '120',
          start_time: '2018-08-25 14:54',
          end_time: '2018-08-25 14:54',
          remark: ''
        }
      ]
    }
  },
  options1: {
    shortcuts: [
      {
        text: '最近7天',
        value () {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          return [start, end]
        }
      },
      {
        text: '最近30天',
        value () {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          return [start, end]
        }
      }
    ]
  }
}
</script>
<style lang="less">
.reversing-list {
  .search-box {
    padding-top: 0;
  }
  .search-item,
  .search-item-btn {
    padding-top: 24px;
  }
  .search-box .search-item-left {
    width: 90%;
  }
  .search-box .search-item-right {
    width: 10%;
  }
  .data-time-style {
    .ivu-input-wrapper {
      width: 280px;
    }
  }
}
</style>
